<template>
	<view class="cart">
		<checkbox-group class="block" @change="changeCheckbox">
			<view>
				<!-- 占位符 -->
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="cart-cont" v-for="(item , index) in cartList">
					<view class="cart-left">
						<!-- 占位符 -->
						<view style="width: 100rpx;height: 1rpx;"></view>
						<!-- <view style="width: 100rpx; margin: 70px auto;">
							<checkbox :value="item.cartId" />
						</view> -->
						<view class="choose-shop" >	
						<checkbox :value="item.cartId" :checked="checked"/>
						</view>
					</view>
					<view class="cart-right">
						<!-- 占位符 -->
						<view style="width: 100%;height: 1rpx;"></view>
						<!-- 店铺 -->
						<view class="store" v-if="item.store!=null">{{item.store}}</view>
						<view class="store" v-if="item.store==null">商城制造</view>
						<!-- 购物车商品数据 -->
						<view class="cart1">
							<!-- 占位符 -->
							<view style="width: 1px;height: 150rpx;" v-if="loginInfo!=null"></view>
							<view class="shop-image">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="sku-num">
								<view class="shop-name" >
									{{item.name}}
								</view>
								
								<view class="sku-param"v-if="item.style!=null">
									<view style="width: 20rpx;height: 30rpx;"></view>{{item.style}}
								</view>
								<view class="sku-param"v-if="item.style==null">
									<view style="width: 20rpx;height: 30rpx;"></view>{{item.size}}
								</view>
								<view class="price-num">
									<view style="font-size: 25rpx;color: #CB4335;">
										￥{{item.price}}
									</view>
									<view style="margin-left: 180rpx;font-size: 25rpx;">数量：{{item.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 100px;"v-if="cartList.length!=0"></view>
		</checkbox-group>
		<view class="buy-cont" v-if="loginInfo!=null">
			<view style="width: 55rpx;height: 60rpx;"></view>
			<view class="all-choose" @click="chooseAll" >
				<view style="width: 20rpx;height: 20rpx;border-radius: 50%;margin: 10rpx auto;" :class="allChooseRa==true?'allchoosera':''"></view>
			</view>
			<view style="width: 50px;height: 100rpx;line-height: 115rpx;text-align: center; ">全选</view>
			<view class="buy-shop">
				<view>合计：<text style="color: #E67E22;">￥{{allPrice}}</text>
				</view>
				<view @click="openPay" style="width: 100px;height: 80rpx;background-color: #F64D25;border-radius: 40rpx;margin-top: 20rpx;margin-left: 10rpx;line-height: 50px;text-align: center;color: #FFFFFF;font-size: 30rpx;">
					结算
				</view>
			</view>
		</view>
		
		
		<view>
			<uni-popup ref="msg" type="dialog">
				<uni-popup-dialog :type="dialogType" cancelText="关闭" confirmText="确定" :title="title" :content="dialogContent" @confirm="closeDialog"
					@close="closeDialog"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="pay" type="dialog">
				<view style="width: 500rpx;height: 400rpx;background-color: #FFFFFF;border-radius: 20rpx;">
					<view style="width: 100rpx; height: 20rpx;"></view>
					<view style="width: 100%;height: 50rpx;text-align: center;line-height: 50rpx;font-size: 40rpx;">支付</view>
					<view style="width: 100%;height: 50rpx;text-align: center;line-height: 50rpx;font-size: 30rpx;color: #D35400;margin-top: 10rpx;">{{allPrice}}元</view>
					<view class="pay-password">
						<view>支付密码</view>
						<input type="password" v-model="payPassword" :placeholder="placeholder"/>
					</view>
					<view class="pay-cont">
						<view style="width: 250rpx;height: 70rpx;border-right: 1rpx solid #A6ACAF;" @click="closePay">取消</view>
						<view style="width: 250rpx;height: 70rpx;color: #007AFF;" @click="pay">支付</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="loginInfoNull" v-if="loginInfo==null">
			你还未登录,请先登录
		</view>
	</view>
</template>

<script>
	import http from "../../util/httpRequest.js"
	import store from "../../store/index.js"
	export default {
		data() {
			return {
				cartList:[],
				chooseCart:[],
				checked:false,
				dialogType: "error",
				title:"错误",
				dialogContent: null,
				allPrice:0,
				payPassword:null,
				allChooseRa:false,
				placeholder: "密码必须是数值"
				
			}
		},
		computed:{
			loginInfo(){
				return store.state.common.loginInfo
			}
		},
		methods: {
			//获取购物车数据
			getCart(){
				this.cartList = []
				var that = this
				
				uni.request({
					url: http.memberUrl+"member/shopcart/list",
					method:"POST",
					data:{
						userId: that.loginInfo.userId
						// userId:
					},
					success(res) {
						console.log("购物车数据",res.data.data)
						let cart = res.data.data
						that.cartList = res.data.data
					}
				})
			},
			
			changeCheckbox(e){
				// console.log(this.cartList)
				var that = this
				that.chooseCart = e.detail.value
				//计算价格
				let mathParice = 0
				let buyCartList = that.cartList
				buyCartList.forEach((item)=>{
					for (let i = 0; i < that.chooseCart.length; i++) {
						if(that.chooseCart[i]==item.cartId){
							mathParice = mathParice+item.price
						}
					}
				})
				that.allPrice = mathParice.toFixed(2);
				
			},
			//购买
			buy(){
				var that = this
				if(that.chooseCart.length==0){
					that.dialogContent = "请选择商品在进行购买"
				}
			},
			closeDialog(){
				this.$refs.msg.close()
			},
			//全选
			chooseAll(){
				this.allChooseRa = !this.allChooseRa
				var that = this
				this.checked = !this.checked
				if(this.checked==true){
					let allChooseShop = []
					for (let i = 0; i < that.cartList.length; i++) {
						allChooseShop.push(that.cartList[i].cartId)
					}
					
					that.chooseCart = allChooseShop
					let mathParice = 0
					let buyCartList = that.cartList
					buyCartList.forEach((item)=>{
						for (let i = 0; i < that.chooseCart.length; i++) {
							if(that.chooseCart[i]==item.cartId){
								mathParice = mathParice+item.price
							}
						}
					})
					that.allPrice = mathParice.toFixed(2);
				}
				if(this.checked==false){
					let allChooseShop = []
					that.chooseCart = allChooseShop
					that.allPrice = 0
				}
				if(that.cartList.length!=0){
					if(that.cartList.length==that.chooseCart.length){
						that.checked=true
					}
				}
				
				// console.log("全选",this.checked,that.chooseCart)
			},
			//关闭支付弹出层
			closePay(){
				this.$refs.pay.close()
			},
			//调转支付订单页面
			openPay(){
				var that = this
				let orderLsit = that.cartList
				let chooseList = that.chooseCart
				let payDataList =[]
				let shopNum = 0
				store.commit("payType",1)
				// console.log("orderLsit",orderLsit)
				// console.log("chooseList",chooseList)
				if(that.chooseCart.length!=0){
					for (let i = 0; i < orderLsit.length; i++) {
						for (let j = 0; j < chooseList.length; j++) {
							if(orderLsit[i].cartId==chooseList[j]){
								payDataList.push(orderLsit[i])
								shopNum = shopNum+1
							}
						}
					}
				}
				
				if(that.chooseCart.length!=0){
					store.commit("payOrderIdList",that.chooseCart)
					store.commit("payOrder",payDataList)
					store.commit("allPrice",that.allPrice)
					store.commit("shopNum",shopNum)
					uni.reLaunch({
						url: '/pages/common/payOrder',
						success() {
							store.commit("router","/pages/cart/cart")
						}
					})
								
				}{
					that.dialogType="error"
					that.title = "操作错误"
					that.dialogContent = "你还没选择商品"
					that.$refs.msg.open()
				}
				
				
			},
			
			
			
			
			
			
			
			
		},
		created() {
			this.getCart()
		},
		onTabItemTap(){
			if(this.loginInfo!=null){
				this.checked = false
				this.getCart()
			}
		}
	}
</script>

<style scoped>
	.cart{
		width: 100%;
		background-color: #E9E8E6;
	}
	.cart-cont{
		display: flex;
		margin: 10px auto;
		width: 95%;
		height: 300rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.cart-left{
		width: 100rpx;
		height: 300rpx;
		/* background-color: #D83CE7; */
	}
	.cart-right{
		margin-left: 20rpx;
		width: 600rpx;
		height: 300rpx;
		/* background-color: #E7E43C; */
	}
	.choose-shop{
		margin: 130rpx auto;
		width: 50rpx;
		height: 50rpx;
		/* border: 3rpx solid #B2BABB; */
		/* border-radius: 50%; */
		/* background-color: #007AFF; */
		
	}
	.store{
		margin-top: 10rpx;
		width: 600rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: left;
		font-size: 30rpx;
		font-weight: 800;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* background-color: #18BC37; */
	}
	.cart1{
		display: flex;
		margin-top: 20rpx;
		width: 600rpx;
		height: 180rpx;
		/* background-color: #55FEAE; */
	}
	.shop-image{
		margin-top: 13rpx;
		width: 170rpx;
		height: 150rpx;
		border-radius: 20rpx;
		/* background-color: #FEB055; */
	}
	.sku-num{
		margin-top: 13rpx;
		margin-left: 13rpx;
		width: 400rpx;
		height: 150rpx;
		/* background-color: #D00D45; */
	}
	.shop-name{
		height: 40rpx;
		width: 400rpx;
		overflow: hidden;
		font-size: 24rpx;
		/* color: #616A6B; */
		text-overflow: ellipsis;
		white-space: nowrap;
		/* background-color:#F3A421 ; */
		
	}
	.sku-param{
		display: flex;
		height: 50rpx;
		width: 400rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		color: #515A5A;
		border-radius: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background-color:#EAEDED;
	}
	.price-num{
		display: flex;
		height: 40rpx;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* background-color:#97F321 ; */
	}
	.sku-num>view{
		margin-top: 4rpx;
	}
	.shop-image>image{
		width: 170rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}
	.loginInfoNull{
		margin: 0 auto;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		background-color: #FFFFFF;
	}
	.activity{
		background-color: #2ECC71;
	}
	.buy-cont{
		position: fixed;
		display: flex;
		bottom: 0;
		width: 100%;
		height: 70px;
		background-color: #FFFFFF;
	}
	.all-choose{
		margin-top: 40rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 3rpx solid #D5DBDB;
	}
	.buy-shop{
		display: flex;
		margin-left: 130rpx;
		width: 500rpx;
		height: 120rpx;
		line-height: 120rpx;
		/* background-color: #2ECC71 */
	}
	.pay-cont{
		display: flex;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		
		font-size: 30rpx;
		border-top: 1rpx solid #A6ACAF;
		/* background-color: #18BC37 */
	}
	.pay-password{
		width: 100%;
		height: 150rpx;
		/* background-color: #007AFF; */
	}
	.pay-password>view{
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		
	}
	.pay-password>input{
		margin: 15px auto;
		width: 70%;
		height: 70rpx;
		font-size: 27rpx;
		color: #A6ACAF;
		border-radius: 10rpx;
		text-align: center;
		border: 1rpx solid #A6ACAF;
	}
	.allchoosera{
		
		background-color: #09bb07;
	}
	
</style>
